<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <!-- Tell the browser to be responsive to screen width -->
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
    <!-- bootstrap datepicker -->
    <link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect.
    -->
    <link rel="stylesheet" href="../../dist/css/skins/skin-blue.min.css">
    <link rel="stylesheet" href="../../css/style.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="skin-blue sidebar-mini" style="height: auto;">
    <div class="wrapper" style="height: auto;">
        <!-- 顶部导航栏 -->
        <header class="main-header">
            <!-- Logo -->
            <a href="../../index.html" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><b>智途</b></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg"><b>智途</b>科技</span>
            </a>
            <!-- Header Navbar: style can be found in header.less -->
            <nav class="navbar navbar-static-top" role="navigation">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                    <span class="sr-only">切换导航</span>
                </a>
                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">
                    <ul class="nav navbar-nav">
                        <!-- Messages: style can be found in dropdown.less-->
                        <li class="messages-menu">
                            <a href="../project/my-approval.html" class="dropdown-toggle">
                                我要审批
                                <i class="fa fa-envelope-o"></i>
                                <span class="label label-success">4</span>
                            </a>
                        </li>
                        <!-- User Account: style can be found in dropdown.less -->
                        <li class="dropdown user user-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <img src="../../dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
                                <span class="hidden-xs">智途</span>
                            </a>
                            <ul class="dropdown-menu">
                                <!-- User image -->
                                <li class="user-header">
                                    <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                                    <p>智途</p>
                                    <small>一枚快乐的搬砖小能手</small>
                                </li>
                                <!-- Menu Body -->
                                <!-- Menu Footer-->
                                <li class="user-footer">
                                    <div class="pull-left">
                                        <a href="../../modify-password.html" class="btn btn-default btn-flat">修改</a>
                                    </div>
                                    <div class="pull-right">
                                        <a href="#" class="btn btn-default btn-flat">退出</a>
                                    </div>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#" data-toggle="control-sidebar">信息公告
                                    <i class="fa fa-bell-o"></i>
                                    <span class="label label-warning"><font><font>10</font></font></span>
                                </a>
                        </li>
                    </ul>
                </div>
            </nav>
        </header>
        <!-- 左侧菜单栏 -->
        <aside class="main-sidebar">
            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">
                <!-- Sidebar user panel -->
                <div class="user-panel">
                    <div class="pull-left image">
                        <img src="../../dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
                    </div>
                    <div class="pull-left info">
                        <p>智途</p>
                        <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                    </div>
                </div>
                <!-- sidebar menu: : style can be found in sidebar.less -->
                <ul class="sidebar-menu">
                    <li class="header">ERP管理系统</li>
                    <li class="treeview  ">
                        <a href="#">
                            <i class="fa fa-dashboard"></i>
                            <span>项目管理</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="../project/my-project.html"><i class="fa fa-circle-o"></i> 我的项目</a></li>
                            <li><a href="../project/my-approval.html"><i class="fa fa-circle-o"></i> 我的审批</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-files-o"></i>
                            <span>费用报销</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="../funds/my-reimburse.html"><i class="fa fa-circle-o"></i>我的报销</a></li>
                            <li><a href="../funds/my-borrow-money.html"><i class="fa fa-circle-o"></i> 我的借款</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-th"></i>
                            <span>工时填报</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="../time/time1.html"><i class="fa fa-circle-o"></i>我的工时</a></li>
                        </ul>
                    </li>
                    <li class="treeview active">
                        <a href="#">
                            <i class="fa fa-bar-chart"></i>
                            <span>统计分析</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li class="active"><a href="#"><i class="fa fa-circle-o"></i> 统计报表</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-pie-chart"></i>
                            <span>合同管理</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="../contract/contract.html"><i class="fa fa-circle-o"></i> 我的合同</a></li>
                        </ul>
                    </li>
                    <li class="treeview">
                        <a href="#">
                            <i class="fa fa-laptop"></i>
                            <span>系统管理</span>
                            <span class="pull-right-container">
                                    <i class="fa fa-angle-left pull-right"></i>
                                </span>
                        </a>
                        <ul class="treeview-menu">
                            <li><a href="../system/organization.html"><i class="fa fa-circle-o"></i> 组织机构</a></li>
                            <li><a href="../system/post-role.html"><i class="fa fa-circle-o"></i> 岗位角色</a></li>
                            <li>
                                <a href="../system/user-control.html">
                                    <i class="fa fa-circle-o"></i>
                                    <span>用户管理</span>
                                </a>
                            </li>
                            <li><a href="../system/authority-management.html"><i class="fa fa-circle-o"></i> 权限管理</a></li>
                        </ul>
                    </li>
                </ul>
            </section>
            <!-- /.sidebar -->
        </aside>
        <!-- 中间内容 -->
        <div class="content-wrapper">
            <section class="content-header">
                <div class="row">
                    <div class="col-md-6" style="position: relative;">
                        <i class="fa fa-calendar  form-control-feedback form-fa-start" style="left:113px;"></i>
                        <i class="fa fa-calendar  form-control-feedback form-fa-end" style="left:263px;"></i>
                        <div class="input-group input-daterange">
                            <input type="text" class="form-control datepicker" placeholder="开始时间">
                            <div class="input-group-addon">~</div>
                            <input type="text" class="form-control datepicker" placeholder="结束时间">
                        </div>
                    </div>
                </div>
            </section>
            <section class="content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading">
                            <div class="bg-aqua">
                                项目概述
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="table fold table-responsive">
                            <thead>
                                <tr class="info">
                                    <th>项目数</th>
                                    <th>项目预算</th>
                                    <th>实际报销费用</th>
                                    <th>合同成交数</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="text-align: center"><a href="../project/my-project.html" class="td-text-lg">23</a></td>
                                    <td><a href="#" class="td-text-lg"><i class="fa fa-jpy"></i>181.5万</a></td>
                                    <td><a href="#" class="td-text-lg"><i class="fa fa-jpy"></i>1.3万</a></td>
                                    <td><a href="#" class="td-text-lg">21</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="chart">
                            <h4>项目完成情况</h4>
                            <div id="pieChart1" style="height: 330px; width: 787px;" height="330" width="787"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart">
                            <h4>各项目(进行中)成本费用</h4>
                            <div id="barChart" style="height: 330px; width: 787px;" height="330" width="787"></div>
                        </div>
                    </div>
                </div>
                <div class="row" style="margin: 30px 0;">
                    <div class="col-md-6">
                        <div class="chart">
                            <h4>各阶段费用分布情况</h4>
                            <div id="lineChart" style="height: 330px; width: 787px;" height="330" width="787"></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="chart">
                            <h4>报销费用各部门占比</h4>
                            <div id="pieChart2" style="height: 330px; width: 787px;" height="330" width="787"></div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="heading">
                            <div class="bg-aqua">
                                项目明细
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table fold table-striped table-responsive">
                    <thead>
                        <tr class="info">
                            <th>项目编号</th>
                            <th>项目名</th>
                            <th>负责人</th>
                            <th>所属部门</th>
                            <th>项目预算</th>
                            <th>实际成本费用</th>
                            <th>总耗工时</th>
                            <th>总计件数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td style="text-align: center;">XMBH0000001</td>
                            <td>公司网站改版</td>
                            <td>李素萍00111</td>
                            <td>研发</td>
                            <td><i class="fa fa-jpy"></i>222万</td>
                            <td><i class="fa fa-jpy"></i>22万</td>
                            <td>5小时</td>
                            <td>6万件</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">XMBH0000011</td>
                            <td>ERP管理后台</td>
                            <td>糜健00022</td>
                            <td>研发</td>
                            <td><i class="fa fa-jpy"></i>222万</td>
                            <td><i class="fa fa-jpy"></i>22万</td>
                            <td>4小时</td>
                            <td>4万件</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">XMBH0000111</td>
                            <td>商务管理平台</td>
                            <td>杨晨00033</td>
                            <td>研发</td>
                            <td><i class="fa fa-jpy"></i>222万</td>
                            <td><i class="fa fa-jpy"></i>22万</td>
                            <td>1小时</td>
                            <td>2万件</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">XMBH0000002</td>
                            <td>ERP管理后台</td>
                            <td>员工1+工号</td>
                            <td>部门1</td>
                            <td><i class="fa fa-jpy"></i>222万</td>
                            <td><i class="fa fa-jpy"></i>22万</td>
                            <td>1小时</td>
                            <td>1万件</td>
                        </tr>
                        <tr>
                            <td style="text-align: center;">XMBH0000021</td>
                            <td>OA系统</td>
                            <td>员工2+工号</td>
                            <td>部门2</td>
                            <td><i class="fa fa-jpy"></i>222万</td>
                            <td><i class="fa fa-jpy"></i>22万</td>
                            <td>1小时</td>
                            <td>1万件</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
        <!-- 底部标注 -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b><font><font>版本</font></font></b>
                <font>
                    <font> 1.0.0
                    </font>
                </font>
            </div>
            <strong><font><font>版权所有©2017 </font></font><a href=""><font><font>江苏智途科技</font></font></a><font><font>。</font></font></strong>
            <font>
                <font>版权所有。
                </font>
            </font>
        </footer>
        <aside class="control-sidebar control-sidebar-dark">
            <!-- Tab panes -->
            <div class="tab-content">
                <!-- Settings tab content -->
                <div class="tab-pane active">
                    <form method="post">
                        <div style="overflow: hidden;margin: 20px 0;">
                            <span class="control-sidebar-heading">信息公告</span>
                            <button class="btn btn-default btn-xs pull-right">已读</button>
                        </div>
                        <div class="form-group">
                            <label class="control-sidebar-subheading">
                                    研发部开发xxxx
                                    <input type="checkbox" class="pull-right" checked="">
                                </label>
                            <p>
                                昨日下午，研发部门完成xxxxx项目
                            </p>
                        </div>
                        <!-- /.form-group -->
                    </form>
                </div>
                <!-- /.tab-pane -->
            </div>
        </aside>
        <div class="control-sidebar-bg" style="position: fixed; height: auto;"></div>
    </div>
</body>
<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<script src="../../plugins/echart/echarts.js"></script>
<script src="../../plugins/morris/morris.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- bootstrap datepicker -->
<script src="../../plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="../../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<script src="../../dist/js/demo.js"></script>
<script>
    $(function() {
        $(".btn-box-tool").click(function(e) {
            /*切换折叠指示图标*/
            $(this).find("i").toggleClass("fa-minus-square ");
            $(this).find("i").toggleClass("fa-plus-square");
        });
        $('.datepicker').datepicker({
            language: 'zh-CN',
            autoclose: true,
            todayHighlight: true
        });
    });
</script>
<script>
    //BAR　CHART
    var barMyChart = echarts.init(document.getElementById('barChart'));
    var barOptions = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            bottom: '0',
            data: ['报销费用', '项目预算']
        },
        grid: {
            top: '12%',
            left: '3%',
            right: '4%',
            bottom: '10%',
            containLabel: true
        },
        yAxis: {
            type: 'value'
        },
        xAxis: {
            type: 'category',
            data: ['项目1', '项目2', '项目3', '项目4']
        },
        series: [{
            name: '报销费用',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [120, 132, 101, 134]
        }, {
            name: '项目预算',
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            data: [320, 302, 301, 334]
        }]
    };
    barMyChart.setOption(barOptions);
    //PIE CHAER1
    var pieMyChart1 = echarts.init(document.getElementById('pieChart1'));
    var pieOptions1 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                            x: '25%',
                            width: '70%',
                            funnelAlign: 'left',
                            max: 1200,
                        }
                    }
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            y: 'bottom',
            data: ['进行中', '已延期']
        },
        series: [{
            name: '完成情况',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: true,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: 335,
                name: '进行中'
            }, {
                value: 1548,
                name: '已延期'
            }]
        }]
    };
    pieMyChart1.setOption(pieOptions1);
    //LINE CHART
    var lineMyChart = echarts.init(document.getElementById('lineChart'));
    var lineOption = {
        tooltip: {
            trigger: 'axis'
        },
        toolbox: {
            show: true,
            feature: {
                magicType: {
                    show: true,
                    type: ['line', 'bar']
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['部门1', '部门2', '部门3', '部门4', '部门5']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '0%',
            containLabel: true
        },
        series: [{
            name: '公司官网改版',
            type: 'line',
            data: [11, 11, 15, 13, 12],
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最大值'
                }, {
                    type: 'min',
                    name: '最小值'
                }]
            },
            markLine: {
                data: [{
                    type: 'average',
                    name: '平均值'
                }]
            }
        }, {
            name: 'ERP管理后台',
            type: 'line',
            data: [4, 1, 2, 5, 3],
            markPoint: {
                data: [{
                    name: '周最低',
                    value: 1,
                    xAxis: 1,
                    yAxis: 1
                }]
            },
            markLine: {
                data: [{
                        type: 'average',
                        name: '平均值'
                    },
                    [{
                        symbol: 'none',
                        x: '90%',
                        yAxis: 'max'
                    }, {
                        symbol: 'circle',
                        label: {
                            normal: {
                                position: 'start',
                                formatter: '最大值'
                            }
                        },
                        type: 'max',
                        name: '最高点'
                    }]
                ]
            }
        }]
    };
    lineMyChart.setOption(lineOption);
    //PIE CHART2
    var pieMyChart2 = echarts.init(document.getElementById('pieChart2'));
    var pieOptions2 = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        series: [{
            name: '公司官网改版',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            data: [{
                value: 11,
                name: '部门1'
            }, {
                value: 11,
                name: '部门2'
            }, {
                value: 15,
                name: '部门3'
            }, {
                value: 13,
                name: '部门4'
            }, {
                value: 12,
                name: '部门5'
            }]
        }]
    };
    pieMyChart2.setOption(pieOptions2);
</script>

</html>